<template>
  <div id="table">
    <el-row>
      <el-table :data="tableData" style="width: 90%" :row-class-name="tableRowClassName">
        <el-table-column prop="date" label="日期" width="180"></el-table-column>
        <el-table-column prop="name" label="性名" width="180"></el-table-column>
        <el-table-column prop="address" label="地址" ></el-table-column>
      </el-table>
    </el-row>
  </div>
</template>

<script>
export default {
  data () {
    return {
      tableData: [
        {
          date: '2016-06-04',
          name: '王小端',
          address: '北京市朝阳区安贞西里三区5号楼'
        },
        {
          date: '2016-06-04',
          name: '王小端',
          address: '北京市朝阳区安贞西里三区5号楼'
        },
        {
          date: '2016-06-04',
          name: '王小端',
          address: '北京市朝阳区安贞西里三区5号楼'
        },
        {
          date: '2016-06-04',
          name: '王小端',
          address: '北京市朝阳区安贞西里三区5号楼'
        }
      ]
    }
  },
  methods: {
    tableRowClassName ({ row, rowIndex }) {
      if (rowIndex === 1) {
        return 'warning-row'
      } else if (rowIndex === 3) {
        return 'success-row'
      }
      return ''
    }
  }
}
</script>

<style>
.el-table .warning-row {
  background-color: oldlace;
}
.el-table .success-row {
  background-color: #f0f9eb;
}
</style>
